<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<style>
    * {
        margin: 0;
        padding: 0
    }
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        cursor: pointer;
    }
</style>
</head>
<body>
<div id="map"></div>
<th:block th:include="include :: footer" />
<script>
   var prefix = ctx + "leaflet/map";
       // console.log(data.data)
        var map = L.map('map',{
           // center: new L.LatLng(25.6586, 116),
            zoom: 4,
        })
        // 添加地图层
        // 使用高德的WMS服务
        var layer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1, // 最小放缩级别
            maxZoom: 19 // 最大放缩级别
        });
        map.addLayer(layer);
        var zxx = "[[${zxx}]]";
        var ysx = "[[${ysx}]]";
        var zxy = "[[${zxy}]]";
        var ysy = "[[${ysy}]]";
           console.log(zxx)
           console.log(ysx)
           console.log(zxy)
           console.log(ysy)
        // 创建一个LatLngBounds对象，表示你想要设置颜色的区域
        var bounds = new L.LatLngBounds(
            new L.LatLng(zxy, zxx), // 左下角
            new L.LatLng(ysy, ysx), // 右上角
        );

// 在bounds区域上绘制一个矩形图层，并设置样式
        L.rectangle(bounds, { color: "#ff7800", weight: 1 }).addTo(map);

// 确保视图适应新添加的矩形图层
        map.fitBounds(bounds);
</script>
</body>
</html>
